<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>统一文档</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/jq22.css">

    <script src="../../js/jquery-2.1.1.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/jq22.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/lai.bootstrap.js"></script>

    <style>
        html,body{
            width:100%;
            height:100%;
            overflow-x: hidden;
        }
        body{
           /* font-family: "华文细黑";*/
            background:url("../../images/index1.jpg") no-repeat center;
            background-size: 100% 100%;
        }
        .right-func{
            height: 700px;
            width: 150px;
            background: #4e5441;
            float: right;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            color:whitesmoke;
            position:absolute;
            right:0;
            top:70px;
        }
        .setting{
            display: inline-block;
            font-size: 12px;
            color:cadetblue;
            margin-top:10px;
            cursor: pointer;
            padding-right:10px;
            border-right:1px solid #929191;
        }
        .refresh{
            display: inline-block;
            font-size: 12px;
            color:cadetblue;
            margin-top:10px;
            cursor: pointer;
        }
        .service-name{
            border-top:1px solid #929191;
            padding:8px 5px;
            margin: 0 !important;
        }
        .service-name >span{
            cursor: pointer;
        }
        .service-name >span:hover{
            color: #999;
        }
        .service-name >span>img{
            height:18px;
            width:18px;
            border-radius: 5px;
        }

        #modal-9{
            position: absolute;
            top: 20%;
            left: 30%;
            width: 600px;
            background: darkslategray;
            padding: 15px;
            border-radius: 10px;
            display: none;
            z-index: 1041;
            margin: auto;
        }
        .icon-font-my{
            font-size: 10px !important;
        }
        .modal-9-btn{
            padding:8px 16px;
            background:#FFE69F;
            border-radius: 5px;
            margin-left:20px;
            cursor: pointer;
        }
        .modal-9-btn:hover{
            background: #F0F0EE;
        }
        .btn-color-my{
            background: #6f7378;
        }
        #modal-9 .form-control{
            margin-left:15px !important;
            display: inline-block;
            width: 80%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #707878;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">文档导航</a>
        </div>
        <div id="vue_index_nav" class="collapse navbar-collapse" id="navbar-menu">
            <ul class="nav navbar-nav">
                <li><a href="#">首页</a></li>
                <li class="dropdown" onmouseover="$(this).attr('class','dropdown open')" onmouseleave="$(this).attr('class','dropdown')">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                        linux相关
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a v-bind:href="newLinuxDocument">新建文档</a></li>
                        <li><a href="javascript:void(0);" @click="linux_doc_click">查看文档</a></li>
                        <li><a href="javascript:void(0);" @click="linux_cmd_click">常用命令查询</a></li>
                    </ul>
                </li>
                <li class="dropdown" onmouseover="$(this).attr('class','dropdown open')" onmouseleave="$(this).attr('class','dropdown')">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                        SVN相关
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#" >svn安装及配置</a></li>
                        <li><a v-bind:href="newSVNDoc" >新建文档</a></li>
                        <li><a href="#" @click="svn_doc_click">查看文档</a></li>
                    </ul>
                </li>
                <li class="dropdown" onmouseover="$(this).attr('class','dropdown open')" onmouseleave="$(this).attr('class','dropdown')">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                        Java相关
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#" @click="jdk_install_click">jdk安装及配置</a></li>
                        <li><a v-bind:href="newWindowsDoc" >新建文档</a></li>
                        <li><a href="#" @click="windows_doc_click">查看文档</a></li>
                        <li><a href="#" @click="java_common_class_click">java常用工具类</a></li>
                        <li><a href="#" @click="java_spring_click">java开发文档</a></li>
                    </ul>
                </li>
                <li class="dropdown" onmouseover="$(this).attr('class','dropdown open')" onmouseleave="$(this).attr('class','dropdown')">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                        JS相关
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a v-bind:href="newJSDoc">新建文档</a></li>
                        <li><a href="#" @click="gitJSClick">查看文档</a></li>
                    </ul>
                </li>
                <li class="dropdown" onmouseover="$(this).attr('class','dropdown open')" onmouseleave="$(this).attr('class','dropdown')">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                        git相关
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="javascript:open('https://git-scm.com/downloads')">git下载</a></li>
                        <li><a href="#">git安装教程</a></li>
                        <li><a href="#">git使用教程</a></li>
                        <li><a v-bind:href="newGitDoc">新建文档</a></li>
                        <li><a href="#" @click="gitDocClick">查看文档</a></li>
                    </ul>
                </li>
                <li class="dropdown" onmouseover="$(this).attr('class','dropdown open')" onmouseleave="$(this).attr('class','dropdown')">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                        windows相关
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="javascript:open('http://bbs.pcbeta.com/forum.php')">iso、gho镜像下载</a></li>
                        <li><a href="javascript:void(0);" @click="windows_cmd_click">常用dos命令查询</a></li>
                        <li><a v-bind:href="newWindowsDoc" >新建文档</a></li>
                        <li><a href="#" @click="windows_doc_click">查看文档</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <div id='cssmenu'>
                        <ul>
                            <li class='has-sub'><a href='#'>数据库相关 <b class="caret"></b></a>
                                <ul>
                                    <li class='has-sub'><a href='#'>oracle相关</a>
                                        <ul>
                                            <li><a href="#">安装包下载</a></li>
                                            <li><a href="#">window安装教程</a></li>
                                            <li><a href="#">linux安装教程</a></li>
                                            <li><a href="#">SQL Developer工具</a></li>
                                            <li><a href="#" @click="systemOracleCmd">oracle常用操作命令</a></li>
                                            <li><a v-bind:href="newOracleDoc" >新建文档</a></li>
                                            <li><a href="#" @click="oracleDocClick">查看文档</a></li>
                                        </ul>
                                    </li>
                                    <li class='has-sub'><a href='#'>mysql相关</a>
                                        <ul>
                                            <li><a href="#">安装包下载</a></li>
                                            <li><a href="#">window安装教程</a></li>
                                            <li><a href="#">linux安装教程</a></li>
                                            <li><a href="#">Navicat工具</a></li>
                                            <li><a href="#">mysql操作常用命令</a></li>
                                            <li><a v-bind:href="newMysqlDoc" >新建文档</a></li>
                                            <li><a href="#" @click="mysqlDocClick">查看文档</a></li>
                                        </ul>
                                    </li>
                                    <li class="has-sub"><a href="#">db2相关</a>


                                    </li>
                                    <li class="has-sub"><a href="#">sqlServer相关</a>


                                    </li>
                                    <li class="has-sub"><a href="#">h2相关</a>


                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="dropdown" onmouseover="$(this).attr('class','dropdown open')" onmouseleave="$(this).attr('class','dropdown')">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                        Working Space!!!
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#" @click="openFolder('modular/working/workspace')">项目工作空间</a></li>
                        <li><a href="#" @click="projectWorkingDoc">项目工作文档</a></li>
                        <li><a v-bind:href="newWorkingDoc">新建项目记录文档</a></li>
                        <li><a href="#" @click="workingDocClick">查看项目记录文档</a></li>
                    </ul>
                </li>
                <li style="color:white;cursor:pointer;position:absolute;right:15px;top:15px;" @click="serviceManage">
                    服务治理
                </li>
            </ul>
            <a @click="nextBg" href="#">
                <span style="position:absolute;right:80px;top:17px;" class="glyphicon glyphicon-th"></span>
            </a>
        </div>
    </div>
</nav>
<div id="childWin"></div>
<div id="rightFunc" class="right-func" style="width:0px;">
    <div style=""><span style="display: inline-block;margin-left:10px;padding:5px 0px;"><a @click="setting">
          <span class="glyphicon glyphicon-cog icon-font-my"></span>
        </a></span><span class="setting" @click="setting">设置中心</span>
        <span style="display: inline-block;margin-left:10px;">
            <a>
          <span class="glyphicon glyphicon-refresh icon-font-my"></span>
        </a>
    </span><span class="refresh" @click="refresh">刷新</span></div>
    <div>
        <p class="service-name">
            <span style="display:inline-block">
                <img src="../../images/redis.png"/>
            </span>
            <span @click="exec" openModal="0">redis服务启动</span>
            <span class="hidden">modular\service\redis\startRedis.bat</span>
        </p>
        <p class="service-name">
            <span style="display:inline-block">
                <img src="../../images/redisClient.png"/>
            </span>
            <span @click="exec" openModal="0">redis客户端</span>
            <span class="hidden">modular\service\redisClient\redis-desktop-manager.exe</span>
        </p>
        <p class="service-name">
            <span style="display:inline-block">
                <img src="../../images/orm.png"/>
            </span>
            <span @click="exec" openModal="0">数据库映射实体类</span>
            <span class="hidden">modular\service\orm\ORM.jar</span>
        </p>

        <p v-for="item in items" class="service-name">
            <span style="display:inline-block">
                <img :src="item.service_img"/>
            </span>
            <span @click="exec" openModal="1">{{item.service_name}}</span>
            <span class="hidden">{{item.service_position}}</span>
        </p>

    </div>
</div>
<div id="modal-9">
    <div >
        <h3>服务设置</h3>
        <div>
            <p>管理常用服务|方便启停查看</p>
            <button @click="del_alter" type="button" class="btn btn-default btn-sm btn-color-my">
                <span class="glyphicon glyphicon-remove"></span>redis服务启动
            </button>
            <button @click="del_alter" type="button" class="btn btn-default btn-sm btn-color-my">
                <span class="glyphicon glyphicon-remove"></span>redis客户端
            </button>
            <button @click="del_alter" type="button" class="btn btn-default btn-sm btn-color-my">
                <span class="glyphicon glyphicon-remove"></span>数据库映射实体类
            </button>
            <button v-for="(item, index) in items" @click="edit" @dblclick="del" v-bind:index="index" type="button" class="btn btn-default btn-sm btn-color-my">
                <span class="glyphicon glyphicon-remove"></span>{{item.service_name}}
            </button>
            <ul>
                <li style="display: none;"><strong>服务ID:</strong>
                    <input name="id" type="text" class="form-control" placeholder="请输入服务名称">
                </li>
                <li style="padding:15px;padding-left:0;"><strong>服务名称:</strong>
                    <input name="service_name" type="text" class="form-control" placeholder="请输入服务名称">
                </li>
                <li style="padding:15px;padding-left:0;"><strong>服务图标:</strong>
                  <%--  <input name="service_img" style="display: inline-block;margin-left:15px;" type="file" >--%>
                    <input name="service_img" type="text" class="form-control" placeholder="请输入服务图标路径">
                </li>
                <li style="padding:15px;padding-left:0;"><strong>服务位置:</strong>
                    <input name="service_position" type="text" class="form-control" placeholder="输入服务程序路径">
                </li>
            </ul>
            <p style="text-align:center;">
                <span class="modal-9-btn" @click="ok">确定</span>
                <span class="modal-9-btn" @click="cancle">取消</span>
            </p>

        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    var bg_index = 1;
    new Vue({
        el:"#vue_index_nav"
        ,data:{
            newLinuxDocument:"javascript:openWin('linux');"
            ,newOracleDoc:"javascript:openWin('oracle');"
            ,newMysqlDoc:"javascript:openWin('mysql');"
            ,newGitDoc:"javascript:openWin('git');"
            ,newJSDoc:"javascript:openWin('JS');"
            ,newWindowsDoc:"javascript:openWin('windows');"
            ,newWorkingDoc:"javascript:openWin('working');"
            ,newSVNDoc:"javascript:openWin('svn');"
        }
        ,methods: {
            linux_cmd_click: function (e) {
                $("#childWin").load("modular/linux/linux_cmd_index.html");
            }
            ,linux_doc_click: function(e){
                $("#childWin").load("modular/linux/linux_doc_index.html");
            }
            ,oracleDocClick:function(){
                $("#childWin").load("modular/oracle/oracle_doc_index.html");
            }
            ,mysqlDocClick:function(){
                $("#childWin").load("modular/mysql/mysql_doc_index.html");
            }
            ,gitDocClick:function(){
                $("#childWin").load("modular/git/git_doc_index.html");
            }
            ,gitJSClick:function(){
                $("#childWin").load("modular/javascript/js_doc_index.html");
            }
            ,java_common_class_click:function(){
                $("#childWin").load("modular/java/java_common_index.html");
            }
            ,java_spring_click:function(){
                $("#childWin").load("modular/java/java_spring_index.html");
            }
            ,windows_cmd_click: function (e) {
                $("#childWin").load("modular/windows/windows_cmd_index.html");
            }
            ,windows_doc_click: function(e){
                $("#childWin").load("modular/windows/windows_doc_index.html");
            }
            ,workingDocClick:function(){
                $("#childWin").load("modular/working/working_doc_index.html");
            }
            ,projectWorkingDoc:function(){
                $("#childWin").load("modular/working/projectWorkingDoc.html");
            }
            ,openFolder:function(path){
                $.post("working/workingDocFolder", {'path': path}, function () {
                }, "json");
            }
            ,jdk_install_click:function(){
                $("#childWin").load("modular/java/java_jdk_index.html");
            }
            ,svn_doc_click: function(e){
                $("#childWin").load("modular/svn/svn_doc_index.html");
            }
            ,serviceManage:function(){
                if($('.right-func').hasClass("show")){
                    $('.right-func').animate({width:"0px"},150);
                    $('.right-func').removeClass("show");
                    //$.get();
                }else{
                    $('.right-func').animate({width:"150px"},150);
                    $('.right-func').addClass("show");
                }
                refreshService();
            }
            ,nextBg:function(){
                bg_index+=1;
                $("body").css("background","url(../../images/index"+bg_index+".jpg) no-repeat center");
                $("body").css("background-size","100% 100%;");
            }
            ,systemOracleCmd:function(){
                $("#childWin").load("modular/oracle/system_oracle_cmd.html");
            }
        }
    });

    var rightFuncVue = new Vue({
        el:"#rightFunc",
        data:{
            items:{}
        }
        ,methods:{
            setting:function(){
                if($("#setting_shade").length==0){
                    $("body").append("<div id='setting_shade' class='modal-backdrop fade in'></div>");
                }else{
                    $("#setting_shade").remove();
                }
                $("#modal-9").slideDown(200);
                modal_9_vue.items = rightFuncVue.items;
                var eles = $("#modal-9").find("input[name]");
                eles.each(function(a,b){
                    var $b = $(b);
                    $b.val('');
                });
            }
            ,refresh:function(){
                refreshService();
            }
            ,exec:function(e){
                var path = $(e.srcElement).next().text();
                var openModal = $(e.srcElement).attr("openModal");
                MsgAlert.confirm("是否启动服务？",function(){
                    executeCmd(path,openModal);
                },true);
            }
        }
    });

    var modal_9_vue = new Vue({
        el:"#modal-9"
        ,data:{
            items:{}
        }
        ,methods:{
            ok:function(){
                var eles = $("#modal-9").find("input[name]");
                var param = {};
                if(!validate(eles)){
                    return;
                }
                eles.each(function(a,b){
                    var $b = $(b);
                    param[$b.attr("name")] = $b.val();
                });
                $.post("service/serviceAdd",param,function(res){
                    if(res.success=='ok'){
                        $("#modal-9").slideUp(200);
                        $("#setting_shade").remove();
                        MsgAlert.info(res.msg,true);
                        refreshService();
                    }else{
                        MsgAlert.warn(res.msg,true);
                    }
                },"json");
            }
            ,cancle:function(){
                $("#modal-9").slideUp(200);
                $("#setting_shade").remove();
            }
            ,edit:function(e){
                var index = $(e.srcElement).attr("index");
                var obj = modal_9_vue.items[index];
                var eles = $("#modal-9").find("input[name]");
                eles.each(function(a,b){
                    var $b = $(b);
                    $b.val(obj[$b.attr("name")]);
                });
            }
            ,del:function(e){
                var index = $(e.srcElement).attr("index");
                var obj = modal_9_vue.items[index];
                MsgAlert.confirm("确定移除该服务吗？",function(){
                    $.post("service/serviceDel",obj,function(){
                        MsgAlert.info("操作完成！",true);
                        refreshService();
                        $("#modal-9").slideUp(200);
                        $("#setting_shade").remove();
                    });
                },true);
            }
            ,del_alter:function(){
                MsgAlert.warn("预置服务不可操作！",true);
            }
        }
    });

    function executeCmd(cmd,openModal){
        $.post("service/serviceExecute",{"cmdPath":cmd,"openModal":openModal},function(){});
    }

    function validate(eles){
        var result = true;
        eles.each(function(a,b){
            var $b = $(b);
            if($b.attr("name")=='id')return true;
            var lable = $b.prev().text();
            if($b.val()==null||$b.val()==undefined||$b.val()==''){
                MsgAlert.warn(lable+"不可为空！",true);
                result = false;
                return false;
            }
        });
        return result;
    }

    function openWin(val){
        var height = $(window).height();
        var width = $(window).width();
        width = width*0.5;
        var fulls = "left=0,screenX=0,top=0,screenY=0,scrollbars=1";    //定义弹出窗口的参数
        if (window.screen) {
            var ah = screen.availHeight - 30;
            var aw = screen.availWidth - 10;
            fulls += ",height=" + ah;
            fulls += ",innerHeight=" + ah;
            fulls += ",width=" + aw;
            fulls += ",innerWidth=" + aw;
            fulls += ",resizable"
        } else {
            fulls += ",resizable"; // 对于不支持screen属性的浏览器，可以手工进行最大化。 manually
        }

        if(val=='linux'){
            var title = "新建文档（linux相关）";
            open(encodeURI("/common/htmlEditor.jsp?title="+title+"&targetUrl=/documents/docSave&docType=0"),fulls);
        }else if(val=='oracle'){
            var title = "新建文档(oracle相关)";
            open(encodeURI("/common/htmlEditor.jsp?title="+title+"&targetUrl=/documents/docSave&docType=1"),fulls);
        }else if(val=='mysql'){
            var title = "新建文档(mysql相关)";
            open(encodeURI("/common/htmlEditor.jsp?title="+title+"&targetUrl=/documents/docSave&docType=2"),fulls);
        }else if(val=='git'){
            var title = "新建文档(git相关)";
            open(encodeURI("/common/htmlEditor.jsp?title="+title+"&targetUrl=/documents/docSave&docType=3"),fulls);
        }else if(val=='JS'){
            var title = "新建文档(JS相关)";
            open(encodeURI("/common/htmlEditor.jsp?title="+title+"&targetUrl=/documents/docSave&docType=4"),fulls);
        }else if(val=='windows'){
            var title = "新建文档(windows相关)";
            open(encodeURI("/common/htmlEditor.jsp?title="+title+"&targetUrl=/documents/docSave&docType=5"),fulls);
        }else if(val=='working'){
            var title = "新建文档(项目工作相关)";
            open(encodeURI("/common/htmlEditor.jsp?title="+title+"&targetUrl=/documents/docSave&docType=6"),fulls);
        }else if(val=='svn'){
            var title = "新建文档(SVN相关)";
            open(encodeURI("/common/htmlEditor.jsp?title="+title+"&targetUrl=/documents/docSave&docType=7"),fulls);
        }
    }

    function refreshService(){
        $.get("service/serviceAll",function(res){
            res = JSON.parse(res);
            rightFuncVue.items = res.serviceList;
        })
    }

    /*
     * js特效
     * */
    var a_idx=0;
    $("body").on("click",function(event){
        if(event.target.nodeName == 'DIV'){
            a(event);
        }
    });
    function a (e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
            y = e.pageY;
        $i.css({
            "z-index": 99999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        }, 1500, function() {
            $i.remove();
        });
    }

</script>
</html>